<h1 mat-dialog-title>{{"Connect" | translate}} {{ node.name | truncatechars:30 }}</h1>

<div (keyup.enter)="onConfirm()" >
  <elements-select-system-user
    [node]="node"
    [systemUsers]="systemUsers"
    [onSubmit]="onSubmit$"
    (onSelectSystemUser)="onSelectSystemUser($event)"
  >
  </elements-select-system-user>

  <elements-manual-auth
    #manualAuth
    *ngIf="systemUserSelected?.login_mode === 'manual'"
    [node]="node"
    [systemUserSelected]="systemUserSelected"
    [manualAuthInfo]="manualAuthInfo"
    [onSubmit$]="onSubmit$"
  >
  </elements-manual-auth>

  <div class="connect-type">
    <label class="zone-label" for="connect-type">{{ "Connect Type" | translate }}</label>
    <div class="connect-type-group">
      <mat-radio-group
        aria-label="Select an option"
        name="connect-type"
        [(ngModel)]="connectType"
        id="connect-type"
      >
        <mat-radio-button *ngFor="let type of connectTypes" [value]="type">
          {{ type.name | translate }}
          <span class="my-tooltip" attr.data-tooltip="{{'Need to use'| translate}}&nbsp;{{ type.name | translate }}">
            <i *ngIf="type.client" class="fa fa-question-circle-o question"></i>
          </span>
        </mat-radio-button>
      </mat-radio-group>
    </div>
  </div>

  <elements-advanced-option
    #advancedOption
    [connectType]="connectType"
    [systemUserSelected]="systemUserSelected"
    (onOptionsChange)="onAdvancedOptionChanged($event)"
  >
  </elements-advanced-option>

  <div class="auto-connect">
    <label class="zone-label" style="display: block">{{ "Remember select" | translate }}</label>
    <mat-checkbox name="auto-login" [(ngModel)]="autoLogin">
      {{ "Automatic login next" | translate }}
    </mat-checkbox>
  </div>

  <mat-dialog-actions  style="float: right; margin: 20px 0 10px 0;">
    <button mat-raised-button (click)="onCancel()">{{"Cancel"| translate}}</button>
    <button mat-raised-button color="primary" type="submit" [mat-dialog-close]="outputData" (click)="onConfirm()">{{"Confirm"| translate}}</button>
  </mat-dialog-actions>
</div>
